<template>
  <el-card class="card-view" :style="{
    backgroundColor: randomColor(),
  }">
    <div>
      <el-row type="flex" justify="space-around" style="padding:10px">
        <el-col :span="24">
          <div class="card-content">
            <div class="card-content-label">分级监管</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- shadow="always" -->
    <el-select v-model="selectedRegion1" style="width:100px;" placeholder="请选择辖区">
      <el-option
        v-for="item in regions1"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-select v-model="selectedYear1" style="width:100px;"  placeholder="请选择年份">
      <el-option
        v-for="item in years1"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select><el-button @click="drawLine">确定</el-button>
    <el-row>
      <el-col>
        <div id="myChart1" style="width:600px;height: 450px;"></div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { request } from '@/api/service'
export default {
  sort: 6,
  title: '分级监管',
  name: 'class',
  icon: 'el-icon-s-data',
  description: '按年度统计',
  height: 28,
  width: 20,
  isResizable: true,
  props: {
    industry: String,
    data: Object
  },
  data() {
    this.myChart = null
    return {
      data: [],
      radio: '7',
      total: {},
      regions1: [],
      years1: [],
      selectedRegion1: '厦门市',
      selectedYear1: '2022'
    }
  },
  methods: {
    initGet() {
      request({
        url: '/api/risk/apppoint',
        params: { "industry": this.industry }
      }).then((res) => {
        this.data = res.data.class// 这里是class
        // 初始化regions和years
        var yearList = []
        for (var region in this.data) {
          this.regions1.push({label: region, value: region})
          yearList = Object.keys(this.data[region])
        }
        for (var year of yearList) {
          this.years1.push({label: year, value: year})
        }
        this.drawLine()

      })
    },
    // 生成一个随机整数
    randomColor() {
      const color = ['#fffff']
      const ran = Math.floor(Math.random() * 4)
      return color[ran]
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      // 绘制图表
      //const xAxisData = this.data.map(item => item.day)
      //const seriesData = this.data.map(item => item.count)\

      console.log('this.selectedRegion1', this.selectedRegion1)
      console.log('this.selectedYear1', this.selectedYear1)
      const classesData = this.data[this.selectedRegion1][this.selectedYear1] // Object
      console.log('classesData', classesData)// {A:0, B:0, C:0, D:0}
      var pieData = []
      for (var key in classesData) {
        pieData.push({name: key, value: classesData[key]})
      }
      console.log('pieData', pieData)

  const option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: '等级',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: pieData
    }
  ]
};

      this.myChart.setOption(option)
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById('myChart1'))
    this.initGet()
    this.drawLine()
  }
}
</script>

<style scoped lang="scss">
.card-view {
  //border-radius: 10px;
  color: $color-primary;
}

.el-card {
  height: 100%;
}

::v-deep .el-card__body {
  width: 100%;
  height: 100%;
}

.el-radio-button__inner {
  border-radius: 20px;
}
</style>
